<template>
  <div class="container">
    <a-space direction="vertical" :size="16" style="display: block">
      <a-row style="margin-bottom: 16px" :gutter="16">
        <a-col :span="2">
          <a-list style="background-color: white">
            <a-list-item
              v-for="item in weixinStore.wxList"
              :key="item.wxid"
              @click="handle(item)"
              :style="{ backgroundColor: selectedWxid === item.wxid ? '#FFFCE8' : 'white' }"
            >
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar>
                    <img alt="avatar" :src="item.avatarUrl" />
                  </a-avatar>
                </template>
              </a-list-item-meta>
              <template #actions>
                <icon-caret-right
                  :style="{ color: selectedWxid === item.wxid ? '#F53F3F' : '' }"
                />
              </template>
            </a-list-item>
          </a-list>
        </a-col>
        <a-col :span="22">
          <a-card :loading="loading">
            <!-- 添加 v-model:active-key 和 @tab-click -->
            <a-tabs v-model:active-key="activeTab" :position="position" @tab-click="handleTabClick">
              <a-tab-pane key="1">
                <template #title>
                  <a-avatar :size="24" shape="square">
                    <img alt="avatar" :src="selectedAvatar" />
                  </a-avatar>
                  好友
                </template>
                <FriendList :selectedWxid="selectedWxid" :selectedAvatar="selectedAvatar" v-if="loadedTabs['1']" />
              </a-tab-pane>
              <a-tab-pane key="2">
                <template #title>
                  <a-avatar :size="24" shape="square">
                    <img alt="avatar" :src="selectedAvatar" />
                  </a-avatar>
                  群聊
                </template>
                <GroupList :selectedWxid="selectedWxid" :selectedAvatar="selectedAvatar" v-if="loadedTabs['2']" />
              </a-tab-pane>
              <a-tab-pane key="3">
                <template #title>
                  <a-avatar :size="24" shape="square">
                    <img alt="avatar" :src="selectedAvatar" />
                  </a-avatar>
                  自动转发
                </template>
                <Forward :selectedWxid="selectedWxid" v-if="loadedTabs['3']" />
              </a-tab-pane>
              <a-tab-pane key="4">
                <template #title>
                  <a-avatar :size="24" shape="square">
                    <img alt="avatar" :src="selectedAvatar" />
                  </a-avatar>
                  群发任务
                </template>
                <SendAll :selectedWxid="selectedWxid" v-if="loadedTabs['4']" />
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useWeixinStore } from '@/store';
import FriendList from './components/friend-list.vue';
import GroupList from './components/group-list.vue';
import Forward from './components/forward.vue';
import SendAll from './components/send-all.vue';

const weixinStore = useWeixinStore();
const selectedWxid = ref('');
const selectedAvatar = ref('');
const position = ref('1');
const loading = ref(false);

// 控制每个 tab 是否已加载
const loadedTabs = ref<{
  [key: string]: boolean;
}>({
  '1': false,
  '2': false,
  '3': false,
  '4': false,
});
const activeTab = ref('1');

// 处理 tab 点击事件
const handleTabClick = (key: string) => {
  loadedTabs.value[key] = true;
};

onMounted(async () => {
  await weixinStore.fetchWxList();
  if (weixinStore.wxList.length > 0) {
    const defaultItem = weixinStore.wxList[0];
    selectedWxid.value = defaultItem.wxid;
    selectedAvatar.value = defaultItem.avatarUrl;
    loadedTabs.value['1'] = true; // 默认加载第一个 tab
  }
});

// 选择微信账号
const handle = (record: any) => {
  selectedWxid.value = record.wxid;
  selectedAvatar.value = record.avatarUrl;
  weixinStore.setSelectedWeixin(record.wxid, record.avatarUrl);
};
</script>

<style scoped>
.container {
  padding: 16px;
}
</style>